let rpx;
let context;
export default class CanvasManager {
  constructor(_rpx, _context) {
    rpx = _rpx;
    context = _context;
  }

  drawRect(x, y, w, h, bgColor) {
    x = Math.floor(x * rpx);
    y = Math.floor(y * rpx);
    w = Math.floor(w * rpx);
    h = Math.floor(h * rpx);

    context.save();
    context.setFillStyle(bgColor);
    context.fillRect(x, y, w, h);
    context.restore();
  }

  drawImage(url, x, y, w, h) {
    x = Math.floor(x * rpx);
    y = Math.floor(y * rpx);
    w = Math.floor(w * rpx);
    h = Math.floor(h * rpx);
    context.drawImage(url, x, y, w, h);
  }

  drawCircle(bgColor, x, y, r) {
    x = Math.floor(x * rpx);
    y = Math.floor(y * rpx);
    r = Math.floor(r * rpx);
    context.save();
    context.beginPath();
    context.arc(x, y, r, 0, Math.PI * 2, true);
    context.closePath();
    context.setFillStyle(bgColor);
    context.fill();
    context.restore();
  }

  //绘制圆形图片
  drawCirImage(width, heigth, x, y, img) {
    width = Math.floor(width * rpx);
    heigth = Math.floor(heigth * rpx);
    x = Math.floor(x * rpx);
    y = Math.floor(y * rpx);
    var avatarurl_width = width; //绘制的头像宽度
    var avatarurl_heigth = heigth; //绘制的头像高度
    var avatarurl_x = x; //绘制的头像在画布上的位置
    var avatarurl_y = y; //绘制的头像在画布上的位置
    context.save();
    context.beginPath(); //开始绘制
    //先画个圆   前两个参数确定了圆心 （x,y） 坐标  第三个参数是圆的半径  四参数是绘图方向  默认是false，即顺时针
    context.arc(
      avatarurl_width / 2 + avatarurl_x,
      avatarurl_heigth / 2 + avatarurl_y,
      avatarurl_width / 2,
      0,
      Math.PI * 2,
      false
    );

    context.clip(); //画好了圆 剪切  原始画布中剪切任意形状和尺寸。一旦剪切了某个区域，则所有之后的绘图都会被限制在被剪切的区域内 这也是我们要save上下文的原因

    context.drawImage(img, avatarurl_x, avatarurl_y, avatarurl_width, avatarurl_heigth); // 推进去图片，必须是https图片

    context.restore(); //恢复之前保存的绘图上下文 恢复之前保存的绘图上下午即状态 还可以继续绘制
  }

  // 绘制圆角矩形的图片.
  roundedRectImage(x, y, w, h, imgW, imgH, radius, url, array) {
    context.save();
    x = Math.floor(x * rpx);
    y = Math.floor(y * rpx);
    w = Math.floor(w * rpx);
    h = Math.floor(h * rpx);
    imgW = Math.floor(imgW * rpx);
    imgH = Math.floor(imgH * rpx);
    context.beginPath();
    context.moveTo(x, y + radius);
    context.lineTo(x, y + h - radius);
    context.quadraticCurveTo(x, y + h, x + radius, y + h);
    context.lineTo(x + w - radius, y + h);
    context.quadraticCurveTo(x + w, y + h, x + w, y + h - radius);
    context.lineTo(x + w, y + radius);
    context.quadraticCurveTo(x + w, y, x + w - radius, y);
    context.lineTo(x + radius, y);
    context.quadraticCurveTo(x, y, x, y + radius);
    context.clip();
    let percent = imgW / imgH;

    function mainWidth() {
      imgW = w;
      imgH = imgW / percent;
      y = y - (imgH - h) / 2;
    }

    function mainHeight() {
      imgH = h;
      imgW = percent * imgH;
      x = x - (imgW - w) / 2;
    }

    let bool = w / h > imgW / imgH;
    if (array.length == 2) bool = !bool;

    if (bool) {
      if (w > h) {
        mainWidth();
      } else {
        mainHeight();
      }
    } else {
      if (w > h) {
        mainHeight();
      } else {
        mainWidth();
      }
    }

    context.drawImage(url, x, y, imgW, imgH);
    context.restore();
  }

  // 绘制圆角矩形带阴影.
  roundedRect(x, y, width, height, radius, bgColor, shadowBlur) {
    context.save();
    x = Math.floor(x * rpx);
    y = Math.floor(y * rpx);
    width = Math.floor(width * rpx);
    height = Math.floor(height * rpx);
    context.beginPath();
    context.moveTo(x, y + radius);
    context.lineTo(x, y + height - radius);
    context.quadraticCurveTo(x, y + height, x + radius, y + height);
    context.lineTo(x + width - radius, y + height);
    context.quadraticCurveTo(x + width, y + height, x + width, y + height - radius);
    context.lineTo(x + width, y + radius);
    context.quadraticCurveTo(x + width, y, x + width - radius, y);
    context.lineTo(x + radius, y);
    context.quadraticCurveTo(x, y, x, y + radius);
    context.setFillStyle(bgColor);
    if (shadowBlur) {
      // 阴影偏移
      context.shadowOffsetX = 0;
      context.shadowOffsetY = 0;
      // 阴影颜色
      context.shadowColor = "rgba(0,0,0,0.2)";
      // 阴影的模糊半径
      context.shadowBlur = 10;
    }
    context.fill();
    context.restore();
  }

  /** 写文字 */
  drawText(fontSize, color, text, x, y, isBold = false) {
    context.save();
    x = Math.floor(x * rpx);
    y = Math.floor(y * rpx + fontSize * rpx);
    fontSize = Math.floor(fontSize * rpx);
    context.setFillStyle(color);
    if (isBold) {
      context.font = `normal bold ${fontSize}px sans-serif`;
    } else {
      context.font = `normal normal ${fontSize}px sans-serif`;
    }
    context.fillText(text, x, y);
    context.restore();
  }
}
